<template>
  <fieldset>
    <legend>商品</legend>
    <h1>商品:Product</h1>
    <ul>
      <li v-for="item in productData"
        :key="item.id">
        <b>产品名称:{{ item.title }}</b>
        -------
        <b>价格:{{ item.price }}</b>
        -------
        <b>库存:{{ item.inventory }}</b>
        <button @click="addCart(item)"
          :disabled="item.inventory===0">+加入购物车</button>
      </li>
    </ul>
  </fieldset>
</template>

<script>
//需求:
//1.请求服务器,在product组件里渲染数据

//-封装请求方法

//-请求放到vuex的action里面

//-vuex需要模块化,并且添加mutation

//2.点击产品后面的按钮，需要将产品添加到购物车

//3.相同的数据添加到购物车之后,需要让购物车的数量加1,产品的库存减1

//4.总价计算
import { mapState, mapActions } from "vuex";
// 引入axios
import axios from "axios";
export default {
  methods: {
    ...mapActions("product", ["FETCH_PRODUCT"]),
    ...mapActions("cart", ["ADD_CART"]),

    addCart(current) {
      //current  点击按钮选中的这条数据
      // console.log(current);
      this.ADD_CART(current);
    },
  },
  created() {
    // 发送一个请求
    // axios
    //   .get("/api/data/index.json", {
    //     // get请求p://chst.vip的配置
    //     // 请求头
    //     headers: {},
    //     // 传递的参数
    //     params: {
    //       name: "lilei",
    //     },
    //   })
    //   .then((res) => {
    //     console.log(res);
    //   });

    // 发送一个post请求
    // 语法:axios.post("地址",{传递的参数},{请求的配置})
    // axios
    //   .post(
    //     "/api/users/login",
    //     {
    //       username: "lbw",
    //       password: "555",
    //     },
    //     {
    //       // 配置
    //       headers: {
    //         nickname: "xxx",
    //       },
    //     }
    //   )
    //   .then((res) => {
    //     console.log(res);
    //   });

    // 配置模式config
    // axios({
    //   url: "/api/users/login", //请求地址
    //   method: "post", //请求方式
    //   // params: {}, //get请求的传参字段
    //   data: {
    //     username: "admin",
    //     password: "admin",
    //   }, //post请求的传参字段
    //   headers: {}, //请求头
    //   timeout: 3000, //超时设置,请求3秒没有响应,直接进入catch
    //   withCredentials: true, //携带凭据(cookie)
    // }).then((res) => {
    //   console.log(res);
    // });
  },
  mounted() {
    // this.FETCH_PRODUCT();
  },
  computed: {
    ...mapState("product", ["productData"]),
  },
};
</script>